<%@ page import="service.CartService" %>
<%@ page import="model.Cart" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Lu
  Date: 2021/12/19
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
        request.getServerPort() + path + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="<%=basePath%>webpage/css/test.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="<%=basePath%>webpage/css/bootstrap.min.css" />
    <script src="<%=basePath%>webpage/js/jquery-3.5.1.js"></script>
    <script src="<%=basePath%>webpage/js/bootstrap.js"></script>
    <script src="<%=basePath%>webpage/js/bookstore.js"></script>
</head>
<body class="body">
<% request.setCharacterEncoding("utf-8");
    String bkName = request.getParameter("bkName");
    String bkPrice = request.getParameter("bkPrice");
%>
<!--头部-->
<div class="header">
    <div class="logo"><a href="<%=basePath%>webpage/Index.jsp" style="color: #000000;">GoodBooks</a></div>
    <div class="tab_bar">
        <div class="btn-group header-menu">
            <button type="button" class="btn btn-default dropdown-toggle"
                    data-toggle="dropdown">
                menu <span class="caret"></span>
            </button>
            <ul class="dropdown-menu " style="top: 65%;" role="menu">
                <li><a href="#">功能</a></li>
                <li><a href="#">另一个功能</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">个人信息设置</a></li>
            </ul>
        </div>
        <div class="header-item btn btn-default" id="login">
            <% String user = (String) session.getAttribute("uname");
                if(user != null){
            %>
            <a href="#sign" data-toggle="modal" ><%=user%></a>
            <%}else {%>
            <a href="#myModal" data-toggle="modal" >请登录</a>
            <%}%>
        </div>
        <div class="header-item btn btn-default show-cart">
            <a href="#showCart"  data-toggle="modal">
                <img src="<%=basePath%>webpage/image/img_1.png" width="20px" height="22px">
                Cart(2)
            </a>
        </div>
    </div>
</div>
<!--内容部分-->
<div class="content">
    <div class="content-price">
        <div class="text-icon">~~~</div>
        <div class="price-text">The Monocle Guide To Good Business</div>
        <div class="price">$65</div>
    </div>
    <!--    图书介绍和展示-->
    <div class="content-book">
        <!--        左边介绍-->
        <div class="book-left">
            <div class="book-introduce">
                <p> The Monocle Guide to Good Business is a book for would-be business leaders, start-ups, and established companies that feel it’s time for some new ideas.
                    It’s a book made to be used. Write in its margins and turn over the corners of its pages. But don’t expect management speak or miracles for untold riches.
                </p>
                <p>
                    This is not a book about staging a revolution. Rather, this is a book about doing things well—from how you run the show to the pens you buy. And even about taking your dog to work.
                    The 300-page book features original photography and illustrations printed on a selection of the highest-quality papers.
                </p>
                <p>
                    The Monocle Guide to Good Business is a handbook for those who want to make a company that will last;
                    it’s the ultimate reference for doing a job you love.
                </p>
            </div>
        </div>
        <!--        右边购物车-->
        <div class="book-right">
            <div class="book-cart">
                <div class="book-cart-title">
                    <div class="cart-title"><%=bkName%></div>
                    <div class="cart-title-price"><%=bkPrice%></div>
                </div>
                <div class="text-monocle">
                    Monocle
                    <img src="<%=basePath%>webpage/image/ArrowTopRight.png">
                </div>
                <div class="cart">
                    <!--  zheli !-->
                    <a href="<%=basePath%>AddCart?bkName=<%=bkName%>&bkPrice=<%=bkPrice%>" style="color: #000000">
                        <img class="plus" src="<%=basePath%>webpage/image/SignPlus.png" height="24px" width="24px" style="margin-right: 8px;margin-top: -3px;">
                        Add to Cart
                    </a>
                </div>
                <div class="page-box">
                    <div class="text-box">
                        <p>Features</p>
                        <p>Published by</p>
                        <p>Printed in</p>
                        <p>Dimensions</p>
                    </div>
                    <div class="page-numBox">
                        <p>300 pages , linen hard cover</p>
                        <p>Gestalten</p>
                        <p>Germany</p>
                        <p>20cm x 26.5cm x 3cm</p>
                    </div>
                </div>
            </div>
        </div>
        <!--        图书图片-->
        <div class="book-image">
            <img src="<%=basePath%>webpage/image/book.png" width="588px" height="730px">
        </div>
    </div>
    <!-- 搜索框 -->
    <div class="query-box">
        <input type="text" id="" placeholder="~~~ More business and entrepreneurship books" />
        <img src="<%=basePath%>webpage/image/IconFrame.png" />
    </div>
    <!-- 推荐图书 -->
    <div class="book-box">
        <div class="book-item">
            <a href="<%=basePath%>webpage/DetailPage.jsp">
                <div class="book-img">
                    <img src="<%=basePath%>webpage/image/img.png" width="100%">
                </div>
            </a>
            <div></div>
            <div class="book-info">
                <div>
                    <a href="<%=basePath%>webpage/DetailPage.jsp" class="text-a">
                        <p class="book-name">The monocle guide to good business</p>
                    </a>
                    <p class="book-icon">Tyler Brûlé</p>
                </div>
                <div class="book-price">$ 65</div>
            </div>
        </div>
        <div class="book-item">
            <a href="<%=basePath%>webpage/DetailPage.jsp">
                <div class="book-img">
                    <img src="<%=basePath%>webpage/image/img.png" width="100%">
                </div>
            </a>
            <div></div>
            <div class="book-info">
                <div>
                    <a href="<%=basePath%>webpage/DetailPage.jsp" class="text-a">
                        <p class="book-name">The monocle guide to good business</p>
                    </a>
                    <p class="book-icon">Tyler Brûlé</p>
                </div>
                <div class="book-price">$ 65</div>
            </div>
        </div>
        <div class="book-item">
            <a href="<%=basePath%>webpage/DetailPage.jsp" >
                <div class="book-img">
                    <img src="<%=basePath%>webpage/image/img.png" width="100%">
                </div>
            </a>
            <div></div>
            <div class="book-info">
                <div>
                    <a href="<%=basePath%>webpage/DetailPage.jsp" class="text-a">
                        <p class="book-name">The monocle guide to good business</p>
                    </a>
                    <p class="book-icon">Tyler Brûlé</p>
                </div>
                <div class="book-price">$ 65</div>
            </div>
        </div>
        <div class="book-item">
            <a href="<%=basePath%>webpage/DetailPage.jsp" >
                <div class="book-img">
                    <img src="<%=basePath%>webpage/image/img.png" width="100%">
                </div>
            </a>
            <div></div>
            <div class="book-info">
                <div>
                    <a href="<%=basePath%>webpage/DetailPage.jsp" class="text-a">
                        <p class="book-name">The monocle guide to good business</p>
                    </a>
                    <p class="book-icon">Tyler Brûlé</p>
                </div>
                <div class="book-price">$ 65</div>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<div class="footer">
    <div class="footer-box">
        <div class="footer-label">
            <p><a href="#">All books</a></p>
            <p><a href="#">Architecture</a></p>
            <p><a href="#">Arts & Entertainment</a></p>
            <p><a href="#">Bios & Memoirs</a></p>
            <p><a href="#">Business & Management</a></p>
            <p><a href="#">Design & Print</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Economic & Politics</a></p>
            <p><a href="#">Fiction</a></p>
            <p><a href="#">Graphic Design</a></p>
            <p><a href="#">Health & Fitness</a></p>
            <p><a href="#">Business & Management</a></p>
            <p><a href="#">Design & Print</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Non-Fiction</a></p>
            <p><a href="#">Philosophy</a></p>
            <p><a href="#">Photograhpy</a></p>
            <p><a href="#">Productivity</a></p>
            <p><a href="#">Psychology</a></p>
            <p><a href="#">Science & Nature</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Self Improvement</a></p>
            <p><a href="#">Architecture</a></p>
            <p><a href="#">Technology</a></p>
        </div>
        <div class="footer-label">
            <p><a href="#">Ablout us</a></p>
            <p><a href="#">Contact</a></p>
            <p><a href="#">Support</a></p>
            <p><a href="#">Privacy</a></p>
            <p><a href="#">Privacy</a></p>
            <p><a href="#">Cookies</a></p>
        </div>
    </div>
    <div class="footer-author">
        <div class="logo">goodbooks</div>
        <div class="author">Designed by lu.</div>
    </div>
</div>
<!-- 登录模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 360px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
            <h3 class="login-title" style="text-align: center;">Login</h3>
            <!-- <div class="modal-body"></div> -->
            <form class="form-horizontal" role="form" style="margin-top: 30px;" action="<%=basePath%>LoginCustomer" method="post">
                <div class="form-group" style="display: flex; margin-left: 80px;">
                    <label for="firstname" class="col-sm-2 control-label">用户名</label>
                    <input type="text" class="form-control" name="user" placeholder="请输入用户名" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 80px;">
                    <label for="lastname" class="col-sm-2 control-label">密码</label>
                    <input type="password" class="form-control" name="password" id="lastname" placeholder="请输入密码" style="width: 320px;">
                </div>
                <div class="form-group" style="margin-left: 65px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox" style="display: flex;">
                            <a class="forgot-pw" href="#">Forgot password ?</a>
                            <a class="register" href="#register" data-toggle="modal" >Register now</a>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input class="login-btn" type="submit" value="LOGIN"/>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 注册模态框（Modal） -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 500px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
            <h3 class="login-title" style="text-align: center;">Create Account</h3>
            <!-- <div class="modal-body"></div> -->
            <form class="form-horizontal" role="form" style="margin-top: 30px;" action="<%=basePath%>AddCustomer" method="post">
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="firstname" class="col-sm-3 control-label">用户名</label>
                    <input type="text" class="form-control" id="firstname" name="name" placeholder="请输入用户名" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">密码</label>
                    <input type="password" class="form-control" name="password" placeholder="请输入密码" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">确认密码</label>
                    <input type="password" class="form-control" placeholder="请再次输入密码" style="width: 320px;">
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">性别</label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" value="男" checked> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" value="女"> 女
                    </label>
                </div>
                <div class="form-group" style="display: flex; margin-left: 20px;">
                    <label for="lastname" class="col-sm-3 control-label">邮箱</label>
                    <input type="text" class="form-control" name="email" placeholder="请输入邮箱" style="width: 320px;">
                </div>
                <div class="form-group" style="margin-left: 65px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox" style="display: flex;">
                            <a class="register" href="#myModal" data-toggle="modal">Existing account, return to login</a>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input class="login-btn" type="submit" value="LOGIN"/>
                </div>
            </form>
            <!-- <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                 <button type="button" class="btn btn-primary">提交更改</button>
             </div> -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 购物车显示框 -->
<div class="mantle">
    <div class="show-cart-box">
        <div class="show-cart-header">
            <div class="show-cart-icon"><</div>
            <div class="show-cart-img"><img src="<%=basePath%>webpage/image/shoppingbag.png">(4)</div>
        </div>
        <div class="show-cart-list">
            <% CartService service = new CartService();
                List<Cart> cartList;
                cartList = service.QueryAllCart();
                for(Cart cart:cartList){
            %>
            <div class="show-cart-item">
                <img src="<%=basePath%>webpage/image/img.png">
                <div style="width: 100%">
                    <div class="show-cart-info">
                        <p><%=cart.getBk_name()%></p>
                        <div class="show-cart-price"><%=cart.getC_price_selected()%></div>
                    </div>
                    <div class="cart-btn-box">
                        <div class="cart-plus">+</div>
                        <div class="cart-num"><%=cart.getBk_cartNum()%></div>
                        <div class="cart-reduce">-</div>
                    </div>
                </div>
            </div>
            <%}%>
        </div>
        <div class="cart-total-amount">
            <div class="total-amount">
                <div class="subtotal">Subtotal</div>
                <div class="control-label-num">$ 325</div>
            </div>
            <div class="total-amount">
                <div class="shipping">Shipping</div>
                <div class="control-label-num">$ 16</div>
            </div>
            <div class="total-amount-btn">
                CHECKOUT
            </div>
        </div>
    </div>
</div>
<%--登录退出框--%>
<div class="modal fade" id="sign" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 200px; width: 400px; margin: 0 auto">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <h3 class="login-title" style="text-align: center;">信息提示</h3>
            <h4 style="position: absolute; left: 100px; top: 50%;" >是否确认退出该账号</h4>
            <form class="form-horizontal" role="form" style="margin-top: 30px;" action="<%=basePath%>LoginCustomer" method="post">
                <input type="hidden" name="sign" value="out">
                <div style="position: absolute;bottom: 14px;left: 32%;">
                    <input type="submit" class="btn btn-group" value="确定"/>
                    <button type="button" class="btn btn-group" data-dismiss="modal" aria-hidden="true" style="margin-left: 10px">取消</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
